<template>
  <div class="shop">
    <img class="shop-pic" :src="item.imgUrl" alt="" v-show="item.imgUrl">
    <div :class="{'shop-content':true,'shop-content-bordered':!hiddenBordered}">
      <p class="shop-title">{{ item.name }}</p>
      <p class="shop-tags">
        <span class="shop-tag">月售{{ item.sales }}+</span>
        <span class="shop-tag">起送¥{{ item.expressLimit }}</span>
        <span class="shop-tag">运费¥{{ item.expressPrice }}</span>
      </p>
      <p class="shop-desc">
        {{ item.slogan }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShopInfo',
  props: ['item', 'hiddenBordered']
}
</script>

<style lang="scss" scoped>
@import "../style/variables";

.shop {
  margin-top: .14rem;
  display: flex;
  color: #000000;

  .shop-pic {
    width: .56rem;
    height: .56rem;
    margin-right: .16rem;
  }

  .shop-content {
    flex: 1;
    margin-top: -.17rem;

    &-bordered {
      border-bottom: .01rem solid #F1F1F1;
    }

    .shop-title {
      font-size: 16px;
    }

    .shop-tags {
      font-size: 13px;
      margin: .08rem 0;

      .shop-tag {
        margin-right: .16rem;
      }

    }

    .shop-desc {
      color: #E93B3B;
    }

  }
}
</style>
